<template>
  <div class="html">
    <start-project-header></start-project-header>
    <div class="threeOfThree">
      <span>3 of 3</span>
    </div>
    <div class="main">
      <span>Finally,let’s confirm your eligibility.</span>
      <span>Tell us where you’re based and confirm a few other details before we proceed.</span>
    </div>
    <div class="select">
      <input class="title" @click="dropCli" v-model="titleTxt" />
      <div class="drop" v-show="display">
        <input v-for="(item,key) in dropList" @click="selectCli(key)" :class="{backgroundColor:backgroundColor}" :value="item"/>
      </div>
    </div>
    <div class="text">
      <span class="text-title">What if my country isn’t listed?</span>
      <span class="text-checkbox" v-for="(item,key) in chockList" :key="key">
       <input type="checkbox" checked class="Checkbox" :id="item.id"/>
       <label :for="item.id" ><span style="">{{item.text}}</span></label>
      </span>
    </div>
    <div class="nextButton">
      <span>Project idea</span>
      <input type="button" value="Continue"/>
    </div>
  </div>

</template>

<script>
  import startProjectHeader from '../public/StartProjectHeader'

    export default {
        name: "start-project-three",
        components:{ startProjectHeader },
        data(){
          return{
              display:false,
              dropList:[ 'Americe','Japan','Korea','China' ],
              backgroundColor:false,
              titleTxt:'Select your country',
              chockList:[ { text:'I am at least 18 years old.', id:'check1' }, { text:'I can verify a bank account and government-issued ID.', id:'check2' },{ text:'I have a debit and/or credit card.', id:'check3' } ]
          }
        },
        methods:{
            dropCli() {
                this.display = true;
            },
            selectCli(key){
                this.titleTxt = this.dropList[key];
                this.display = false;
            }
        }
    }
</script>

<style scoped lang="scss">
  .html{
    width: 100vw;
    padding: 0 75px;
    box-sizing: border-box;
  }
  .threeOfThree{
    display: flex;
    justify-items: left;
    span{
      display: block;
      line-height: 28px;
      font-size:20px;
      color:#2E2E2E;
    }
  }
  .main{
    display: flex;
    width: 700px;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    span:nth-child(1){
      margin-top: 122px;
      font-size:36px;
      color:#2E2E2E;
      height: 50px;
    }
    span:nth-child(2){
      width: 700px;
      height: 66px;
      font-size:24px;
      color:#666666;
      margin: 20px 0;
      text-align: center;
    }
  }
  .select{
    width: 700px;
    margin: 0 auto;
    padding: 30px 0 15px 0;
    .title{
      width: 700px;
      line-height: 64px;
      display: block;
      font-size:24px;
      color:#666666;
      padding-left: 30px;
      box-sizing: border-box;
      outline: none;
      border:#DBDEDD;
      box-shadow: 2px 2px 4px 0 #DBDEDD, -2px -2px 4px 0 ;
      background-color: white;
      border-radius: 4px;
      &:focus{border: 1px solid #2E2E2E;}
    }
    .drop{
      padding: 15px;
      margin: 0 auto;
      background: #FFFFFF;
      box-shadow: 2px 2px 4px 0 #DBDEDD, -2px -2px 4px 0 #DBDEDD;
      border-radius: 4px;
      margin-top: 10px;
      position: absolute;
      z-index: 999;
      border: 1px solid #2E2E2E;
      input{
        display: block;
        width: 670px;
        line-height: 64px;
        padding-left: 30px;
        box-sizing: border-box;
        color: #2E2E2E;
        font-size: 28px;
        outline: none;
        border: none;
        &:focus{background-color: #E8E8E8;;}
      }
    }
    .backgroundColor{background: #E8E8E8;}
  }
  .text{
    width: 700px;
    margin: 0 auto;
    padding-bottom:45px;
    border-bottom: 2px solid #DBDEDD;
    .text-title{margin:0 0 40px 24px;}
    .text-checkbox{margin-bottom:15px;}
    span {
      position: relative;
      display: block;
      span{
        margin-left: 27px;
        line-height: 20px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #2E2E2E;
        display: inline-block;
        width: 400px;
      }
    }
    .Checkbox {visibility: hidden;}
    .Checkbox+label {
      position:absolute;
      width: 18px;
      height: 18px;
      border: 1px solid #A6A6A6;
      border-radius: 50%;
      background-color: transparent;
    }
    .Checkbox:checked+label:after {
      content: "";
      position: absolute;
      left: 2px;
      top:2px;
      width: 9px;
      height: 4px;
      border: 2px solid #A6A6A6;
      border-top-color: transparent;
      border-right-color: transparent;
      transform: rotate(-45deg);
      -ms-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -webkit-transform: rotate(-60deg);
    }
  }
  .nextButton{
    width: 700px;
    margin: 20px auto;
    span{
      display: inline-block;
      font-size:20px;
      color:#808080;
      margin-left: 32px;
    }
    input{
      outline: none;
      border: none;
      color:#FFFFFF;
      font-size:18px;
      background: rgba(0,0,0,0.15);
      width:174px;
      height:50px;
      padding-left: 10px;
      box-sizing: border-box;
      border-radius:5px;
      float: right;
      &:active{
        background-color:#333333;
      }
    }
  }
</style>
